<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/styles/mall/index.css">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
    <!-- CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<div class="mall-body" style="margin-right: 50px">
    <div id="homeBanner" class="carousel slide home-banner">
        <h1 style="position: absolute; top: 20px; left: 20px;">创建比赛</h1>
        <form action="/competition/insertMatch" method="post" enctype="multipart/form-data" style="margin-top: 60px;">
            <input id="shipping-address-id" type="hidden" name="id" value=""/>
            <div class="modal-body">
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="comid">比赛所属赛事</label>
                        <input type="hidden" class="form-control"  name="comid" th:value="${competition.getComid()}">
                        <input type="text" class="form-control" id="comid" th:value="${competition.getComname()}">
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="mb-3">
                        <div id="fileUpload" class="container">
                            <label for="upload"><i class="bi bi-filetype-jpg"></i>比赛海报</label>
                            <input type="file" id="upload" accept="image/*" name="fileUpload"/>
                            <canvas id="canvas" class="hidden"></canvas>
                            <div id="preview" class="preview"></div>
                        </div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="startdate"><i class="bi bi-clock"></i>比赛开始时间</label>
                        <input type="date" class="form-control" id="startdate" name="startdate">
                        <div id="startdateError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="form-group col-md-5">
                        <label for="finaldate"><i class="bi bi-clock"></i>决赛时间</label>
                        <input type="date" class="form-control" id="finaldate" name="finaldate">
                        <div id="finaldateError" class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="joindeadline"><i class="bi bi-clock"></i>报名截止时间</label>
                        <input type="date" class="form-control" id="joindeadline" name="joindeadline">
                        <div id="joindeadlineError" class="invalid-feedback"></div>
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="form-group col-md-5">
                        <label for="enddate"><i class="bi bi-clock"></i>比赛结束时间</label>
                        <input type="date" class="form-control" id="enddate" name="enddate">
                        <div id="enddateError" class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="sponsorcontact"><i class="bi bi-person-fill"></i>赞助企业联络人</label>
                        <input type="text" class="form-control" id="sponsorcontact" name="sponsorcontact">
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="form-group col-md-5">
                        <label for="courseleader"><i class="bi bi-person-fill"></i>课程负责人</label>
                        <input type="text" class="form-control" id="courseleader" name="courseleader">
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="gradeinstructor"><i class="bi bi-person-fill"></i>素质教师</label>
                        <input type="text" class="form-control" id="gradeinstructor" name="gradeinstructor">
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="form-group col-md-5">
                        <label for="refereeInformation"><i class="bi bi-person-fill"></i>裁判信息</label>
                        <input type="text" class="form-control" id="refereeInformation" name="enterprisejudges">
                    </div>
                </div>

                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="scoringcriteria"><i class="bi bi-list-stars"></i>评分标准</label>
                        <input type="text" class="form-control" id="scoringcriteria" name="scoringcriteria">
                    </div>
                    <div class="col-md-1"></div> <!-- 增加空白列 -->
                    <div class="form-group col-md-5">
                        <label for="awardintroduction"><i class="bi bi-trophy"></i>赛事奖品说明</label>
                        <input type="text" class="form-control" id="awardintroduction" name="awardintroduction">
                    </div>
                </div>
                <div class="form-row mb-3">
                    <div class="form-group col-md-5">
                        <label for="finallocation"><i class="bi bi-geo-alt-fill"></i>决赛地点</label>
                        <input type="text" class="form-control" id="finallocation" name="finallocation">
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bi bi-x-circle"></i>取消</button>
                <button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i>提交</button>
            </div>
            <div th:replace="common/competition-common::mall-footerWithoutsidebar"></div>
        </form>
    </div>
</div>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>

<script>
    document.getElementById('upload').addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const img = new Image();
                img.onload = function () {
                    const canvas = document.getElementById('canvas');
                    const ctx = canvas.getContext('2d');

                    const MAX_WIDTH = 350;
                    const MAX_HEIGHT = 250;

                    canvas.width = MAX_WIDTH;
                    canvas.height = MAX_HEIGHT;

                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    const scale = Math.max(MAX_WIDTH / img.width, MAX_HEIGHT / img.height);
                    const width = MAX_WIDTH / scale;
                    const height = MAX_HEIGHT / scale;
                    const x = (img.width - width) / 2;
                    const y = (img.height - height) / 2;

                    ctx.drawImage(img, x, y, width, height, 0, 0, MAX_WIDTH, MAX_HEIGHT);

                    const resizedImage = canvas.toDataURL('image/jpeg');

                    const preview = document.getElementById('preview');
                    preview.innerHTML = '<img src="' + resizedImage + '" alt="Resized Image">';
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        } else {
            alert('Please upload a valid image file.');
        }
    });

    /**
     * 表单校验
     */
    $(document).ready(function() {
        $('form').on('submit', function(e) {
            var valid = true;
            var startDate = new Date($('#startdate').val());
            var endDate = new Date($('#enddate').val());
            var finalDate = new Date($('#finaldate').val());
            var joindeadline = new Date($('#joindeadline').val());

            // 清空之前的错误消息
            $('.invalid-feedback').text('');

            if (startDate > endDate) {
                $('#enddateError').text("比赛结束时间不能在比赛开始时间之前！").show();
                valid = false;
            }

            if (finalDate < startDate || finalDate > endDate) {
                $('#finaldateError').text("决赛时间必须在比赛开始和结束时间之间！").show();
                valid = false;
            }
            if (joindeadline >= startDate) {
                $('#joindeadlineError').text("报名截止日期必须在比赛开始之前！").show();
                valid = false;
            }

            if (!valid) {
                e.preventDefault();
            }
        });
    });
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .container {
        text-align: center;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    input[type='file'] {
        margin-bottom: 20px;
    }

    .preview {
        margin-top: 20px;
    }

    .hidden {
        display: none;
    }
</style>
</body>
</html>
